<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>订单管理 - 快递管理系统</title>
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
</head>
<body>
    <div layout:fragment="content">
        <h2 class="mb-4">订单管理</h2>

        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">所有订单</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>订单号</th>
                                <th>寄件人</th>
                                <th>收件人</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 订单数据将在这里通过Thymeleaf渲染 -->
                            <tr th:each="order : ${orders}">
                                <td th:text="${order.orderNumber}"></td>
                                <td th:text="${order.senderName}"></td>
                                <td th:text="${order.receiverName}"></td>
                                <td>
                                    <span class="badge" th:classappend="${order.status == 'PENDING' or order.status == '待处理' ? 'bg-warning' :
                                                                      (order.status == 'SHIPPED' or order.status == '已发货' ? 'bg-primary' :
                                                                      (order.status == 'PICKED_UP' or order.status == '已揽收' ? 'bg-info' :
                                                                      (order.status == 'IN_TRANSIT' or order.status == '运输中' ? 'bg-info' :
                                                                      (order.status == 'UNRECEIVED' or order.status == '未签收' ? 'bg-danger' :
                                                                      (order.status == 'DELIVERED' or order.status == '已签收' ? 'bg-success' :
                                                                      (order.status == 'CANCELED' or order.status == '已取消' ? 'bg-secondary' : 'bg-secondary'))))))}"
                                          th:text="${displayStatusMap.get(order.status) != null ? displayStatusMap.get(order.status) : order.status}">
                                    </span>
                                </td>
                                <td th:text="${#temporals.format(order.createdAt, 'yyyy-MM-dd HH:mm')}"></td>
                                <td>
                                    <a href="#" class="btn btn-sm btn-info view-order-btn" th:data-order-id="${order.id}">查看</a>
                                    <a href="#" class="btn btn-sm btn-warning edit-order-btn" th:data-order-id="${order.id}">修改</a>
                                    <a href="#" class="btn btn-sm btn-danger delete-order-btn" th:data-order-id="${order.id}">删除</a>
                                </td>
                            </tr>
                            <tr th:if="${#lists.isEmpty(orders)}">
                                <td colspan="6">暂无订单数据。</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Order Detail Modal -->
        <div class="modal fade" id="orderDetailModal" tabindex="-1" aria-labelledby="orderDetailModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="orderDetailModalLabel">订单详情</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p><strong>订单号:</strong> <span id="modalOrderNumber"></span></p>
                        <p><strong>寄件人:</strong> <span id="modalSenderName"></span></p>
                        <p><strong>寄件人电话:</strong> <span id="modalSenderPhone"></span></p>
                        <p><strong>寄件人地址:</strong> <span id="modalSenderAddress"></span></p>
                        <p><strong>收件人:</strong> <span id="modalReceiverName"></span></p>
                        <p><strong>收件人电话:</strong> <span id="modalReceiverPhone"></span></p>
                        <p><strong>收件人地址:</strong> <span id="modalReceiverAddress"></span></p>
                        <p><strong>包裹类型:</strong> <span id="modalPackageType"></span></p>
                        <p><strong>重量:</strong> <span id="modalWeight"></span></p>
                        <p><strong>体积:</strong> <span id="modalVolume"></span></p>
                        <p><strong>价格:</strong> <span id="modalPrice"></span></p>
                        <p><strong>状态:</strong> <span id="modalStatus"></span></p>
                        <p><strong>创建时间:</strong> <span id="modalCreatedAt"></span></p>
                        <p><strong>更新时间:</strong> <span id="modalUpdatedAt"></span></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Edit Order Modal -->
        <div class="modal fade" id="editOrderModal" tabindex="-1" aria-labelledby="editOrderModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editOrderModalLabel">修改订单</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="editOrderForm">
                            <input type="hidden" id="editOrderId">
                            <div class="mb-3">
                                <label for="editOrderNumber" class="form-label">订单号:</label>
                                <input type="text" class="form-control" id="editOrderNumber" readonly>
                            </div>
                            <div class="mb-3">
                                <label for="editPackageType" class="form-label">包裹类型:</label>
                                <input type="text" class="form-control" id="editPackageType">
                            </div>
                            <div class="mb-3">
                                <label for="editWeight" class="form-label">重量 (kg):</label>
                                <input type="number" step="0.01" class="form-control" id="editWeight">
                            </div>
                            <div class="mb-3">
                                <label for="editVolume" class="form-label">体积 (m³):</label>
                                <input type="number" step="0.01" class="form-control" id="editVolume">
                            </div>
                            <div class="mb-3">
                                <label for="editPrice" class="form-label">价格 (元):</label>
                                <input type="number" step="0.01" class="form-control" id="editPrice">
                            </div>
                            <div class="mb-3">
                                <label for="editStatus" class="form-label">状态:</label>
                                <select class="form-select" id="editStatus">
                                    <option value="待处理">待处理</option>
                                    <option value="已发货">已发货</option>
                                    <option value="已揽收">已揽收</option>
                                    <option value="运输中">运输中</option>
                                    <option value="未签收">未签收</option>
                                    <option value="已签收">已签收</option>
                                    <option value="已取消">已取消</option>
                                </select>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="saveOrderChangesBtn">保存修改</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Delete Order Confirmation Modal -->
        <div class="modal fade" id="deleteOrderConfirmModal" tabindex="-1" aria-labelledby="deleteOrderConfirmModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteOrderConfirmModalLabel">确认删除订单</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        您确定要删除此订单吗？此操作将永久移除订单记录，不可恢复。
                        <input type="hidden" id="deleteOrderId">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger" id="confirmDeleteOrderBtn">确认删除</button>
                    </div>
                </div>
            </div>
        </div>

        <script th:src="@{/js/orders.js}"></script>
    </div>
</body>
</html> 